<template>
  <Card>
    <p slot="title">销售额统计</p>
    <div class="search-con search-con-top">
      <div>
        运营商户：
        <Select v-model="searchData.operator_id" style="width:180px" filterable @on-change="operatorListChange">
          <Option v-for="item in operatorList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        柜机商户：
        <Select v-model="searchData.franchiser_id" style="width:160px" filterable @on-change="franchiserListChange">
          <Option v-for="item in franchiserList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <!-- 所属模板：
        <Select v-model="searchData.group_id" style="width:200px" filterable>
          <Option v-for="item in groupList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      支付来源：
        <Select v-model="searchData.source_type" style="width:200px">
          <Option v-for="item in sourceList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select> -->
        时间范围：
        <DatePicker :clearable=false @on-change="datePickChange" type="daterange" placement="bottom-end"
          placeholder="请选择" style="width: 180px" :value="timeArr" format="yyyy-MM-dd" confirm></DatePicker>
        <!-- </div>
      <div style="margin-top: 10px;"> -->
        选择省：
        <Select v-model="searchData.province_id" style="width:120px" @on-change="provinceListChange">
          <Option v-for="item in provinceList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        选择市：
        <Select v-model="searchData.city_id" style="width:120px" @on-change="cityListChange">
          <Option v-for="item in cityList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        选择区/县：
        <Select v-model="searchData.area_id" style="width:120px" @on-change="areaListChange">
          <Option v-for="item in areaList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <!-- 所属街道：
        <Select v-model="searchData.street_id" style="width:200px" @on-change="streetListChange">
          <Option v-for="item in streetList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        所属小区：
        <Select v-model="searchData.community_id" style="width:200px">
          <Option v-for="item in communityList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select> -->
        <Button @click="search" type="primary" shape="circle" icon="ios-search" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" type="success" shape="circle" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
        <Button type="warning" style="margin-left: 10px;" @click="exportOrderExcel">导出订单</Button>
        <a href="" style="display: none;" ref="load"></a>
      </div>
    </div>
    <br>
    <Table :columns="columns" :data="list" border>
    </Table>
    <br>
    <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
    </Page>
  </Card>
</template>

<script>
import { standardTimeFormat, formatDate } from '@/libs/tools'
export default {
  data() {
    return {
      searchData: {
        page: 1,
        limit: 10
      },
      timeArr: [],
      // 列表
      columns: [
        {
          title: '柜机商户',
          key: 'franchiser_name',
        },
        {
          title: '联系电话',
          key: 'phone',
        },
        {
          title: '联系人',
          key: 'contact',
        },
        {
          title: '营业额(含未支付)(元)',
          key: 'total_fee',
          width: 180
        },
        {
          title: '会员打折金额(元)',
          key: 'vip_discount_amount',
          width: 180
        },
        {
          title: '优惠券优惠金额(元)',
          key: 'coupon_pay',
          width: 180
        }, {
          title: '商品促销金额(元)',
          key: 'product_sale_price',
          width: 180
        }, {
          title: '余额支付(元)',
          key: 'cash_pay',
        }, {
          title: '在线支付(元)',
          key: 'online_pay',
        }, {
          title: '退款金额(元)',
          key: 'refund_amount',
        }, {
          title: '未支付金额(元)',
          key: 'no_pay',
        },
      ],
      // 数据
      list: [],
      total: 0,
      //运营商列表
      operatorList: [],
      //柜机商列表
      franchiserList: [],
      //模板列表
      groupList: [],
      //支付来源
      sourceList: [{ id: 1, name: '微信' }, { id: 2, name: '用户副卡' }, { id: 3, name: '支付宝' }, { id: 4, name: '线下充值卡' }],
      //省列表
      provinceList: [],
      //市列表
      cityList: [],
      //区县列表
      areaList: [],
      city_id: 0,
      //街道列表
      streetList: [],
      //小区列表
      communityList: [],
    }
  },
  methods: {
    // 查询管理员信息
    getSaleStatisticsList() {
      let params = {
        ...this.searchData,
      };
      this.$axios('/adminstatistics/getSaleStatisticsList', params).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getSaleStatisticsList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getSaleStatisticsList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getSaleStatisticsList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getSaleStatisticsList();
    },
    //运营商户列表
    getOperatorList() {
      this.$axios('/adminstatistics/getOperatorList', {}).then(res => {
        this.operatorList = res;
      });
    },
    //运营商户选择框change事件
    operatorListChange(value) {
      this.$axios('/adminstatistics/getFranchiserListByOperatorId', { operator_id: value }).then(res => {
        this.franchiserList = res;
      });
    },
    //柜机商户选择框change事件
    franchiserListChange(value) {
      this.$axios('/adminstatistics/getGroupListByFranchiserId', { franchiser_id: value }).then(res => {
        this.groupList = res;
      });
    },
    //省列表
    getProvinceList() {
      this.$axios('/adminregion/getProvinceList', {}).then(res => {
        this.provinceList = res;
      });
    },
    //省列表切换
    provinceListChange(value) {
      this.$axios('/adminregion/getCityList', { province_id: value }).then(res => {
        this.cityList = res;
      });
    },
    //市列表切换
    cityListChange(value) {
      this.city_id = value;
      this.$axios('/adminregion/getAreaList', { city_id: value }).then(res => {
        this.areaList = res;
      });
    },
    //区县切换
    areaListChange(value) {
      this.$axios('/adminregion/getStreetList', { city_id: this.city_id, area_id: value }).then(res => {
        this.streetList = res;
      });
    },
    //街道切换
    streetListChange(value) {
      this.$axios('/adminregion/getCommunityList', { street_id: value }).then(res => {
        this.communityList = res;
      });
    },
    //日期选择
    datePickChange(value) {
      this.searchData.startTime = value[0];
      this.searchData.endTime = value[1];
    },
    download() {
      this.searchData.page = 1;
      let params = {
        ...this.searchData,
      };
      this.$axios('/adminstatistics/getSaleStatisticsListExcel', params).then(res => {
        let a = document.createElement('a')
        a.href = res.domain + res.file_name;
        a.click();
        this.$axios('/adminstatistics/removeFile', {
          'unlink_file_name': res.file_name
        });
      });
    },
  },
  created() {
    let date = new Date();
    let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
    let startTime = formatDate(new Date(endTime), "yyyy-MM-dd");
    endTime = formatDate(new Date(), "yyyy-MM-dd");
    this.timeArr[0] = startTime
    this.timeArr[1] = endTime
    this.searchData.startTime = startTime;
    this.searchData.endTime = endTime;
    this.getSaleStatisticsList();
    this.getOperatorList();
    this.getProvinceList();
  }
}
</script>
<style>

</style>
